<template>
   <view class="uv-page">
      <uv-cell-group>
         <uv-cell
            @click="openTransition(item.mode)"
            :title="item.title"
            v-for="(item, index) in list"
            :key="index"
            isLink
         >
            <template v-slot:icon>
               <image class="uv-cell-icon" :src="item.iconUrl" mode="widthFix"></image>
            </template>
         </uv-cell>
      </uv-cell-group>
      <view>
         <uv-transition
            :mode="mode"
            :show="show"
            :custom-style="customStyle"
            @click="click"
            @change="change"
         />
         <uv-gap height="20px"></uv-gap>
         <uv-transition
            ref="ani"
            :show="true"
            :custom-style="customStyle2"
            @click="click"
            @change="change"
         />
      </view>
   </view>
</template>

<script lang="ts" setup>
import { onReady } from '@dcloudio/uni-app';
import { ref } from 'vue';

const ani = ref(null);
const mode = ref('') as any;
const show = ref(false);
const customStyle = ref({
   position: 'fixed',
   top: `${uni.$uv.windowInfo().windowHeight / 2 - 50}px`,
   left: `${uni.$uv.windowInfo().windowWidth / 2 - 50}px`,
   width: '120px',
   height: '120px',
   backgroundColor: '#1989fa',
});
const customStyle2 = ref({
   width: '40px',
   height: '40px',
   backgroundColor: '#1989fa',
});

const list = ref([
   {
      mode: 'fade',
      title: '渐隐渐出过渡',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/transition/fade.png',
   },
   {
      mode: 'slide-top',
      title: '由上至下过渡',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/transition/slideUp.png',
   },
   {
      mode: 'slide-bottom',
      title: '由下至上过渡',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/transition/slideDown.png',
   },
   {
      mode: 'slide-left',
      title: '由左至右过渡',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/transition/slideLeft.png',
   },
   {
      mode: 'slide-right',
      title: '由右至左过渡',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/transition/slideRight.png',
   },
   {
      mode: 'zoom-in',
      title: '由小到大过渡',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/transition/zoom.png',
   },
   {
      mode: 'zoom-out',
      title: '由大到小过渡',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/transition/zoom.png',
   },
   {
      mode: 'custom',
      title: '自定义动画',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/transition/zoom.png',
   },
]);

const openTransition = (item: string) => {
   if (item == 'custom') {
      run();
   } else {
      mode.value = item;
      show.value = true;
      setTimeout(() => {
         show.value = false;
      }, 1500);
   }
};

const run = () => {
   if (!ani.value) return;
   // 同时右平移到 100px,旋转 360 读
   ani.value.step({
      translateX: '200px',
      rotate: '360',
   });
   // 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 读
   ani.value.step(
      {
         translateX: '0px',
         rotate: '0',
      },
      {
         timingFunction: 'ease-in',
         duration: 200,
      }
   );
   // 开始执行动画
   ani.value.run();
};

const click = () => {};

const change = () => {};

onReady(() => {
   ani.value.init({
      duration: 300,
      timingFunction: 'linear',
      transformOrigin: '50% 50%',
      delay: 500,
   });
});
</script>

<style lang="scss" scoped>
.uv-page {
   padding: 0;
}
</style>
